import React, { useContext } from 'react'
import { Space, Select, Input, Button, Cascader } from 'antd'
import style from './style.module.less'
import IconSvg from '@/components/IconSvg'
import { hospitalAdminUserContext } from '../../../context'
import BottomTable from '../bottom/index'

export default () => {
  const { hospitalTopConfig, cityTopConfig, topConfigData } = useContext(hospitalAdminUserContext)

  return (
    <div className={style.hospitalComponentBox}>
      <div className={style.top}>
        <Space>
          <Cascader
            style={{ width: 200 }}
            options={topConfigData.topRegionSelectData}
            expandTrigger='hover'
            placeholder='请选择地区'
            onChange={cityTopConfig.getAreaSelectValue}
          />

          {/* <Select
            style={{ width: 220 }}
            showSearch
            placeholder='请选择状态'
            optionFilterProp='children'
            onChange={hospitalTopConfig.getHospitalSelectState}
            // onSearch={onSearch}
            filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
            options={[
              {
                value: '1',
                label: '开始',
              },
              {
                value: '2',
                label: '结束',
              },
            ]}
          /> */}
          <Select
            style={{ width: 200 }}
            showSearch
            placeholder='登录次数查询'
            optionFilterProp='children'
            onChange={cityTopConfig.getLoginTimeSelectValue}
            filterOption={(input: any, option: any) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={topConfigData.topSelectorData}
          />

          <Input
            suffix={<IconSvg onClick={cityTopConfig.inputEnter} name='search' />}
            onChange={cityTopConfig.getInputNamePhoneValue}
            onPressEnter={cityTopConfig.inputEnter}
            placeholder='负责人姓名/手机'
          />
        </Space>
        <div className={style.btnBox}>
          <Button onClick={hospitalTopConfig.hospitalExport}>
            <IconSvg name='hospitalExport' style={{ marginRight: 7 }} />
            导出
          </Button>
        </div>
      </div>
      <div className={style.bottom}>
        <BottomTable />
      </div>
    </div>
  )
}
